<template>
	<div>
		<div class="h2">申请详情</div>
		
		<div class="main-apply">
			<div class="h3">申请信息</div>
			<div class="message">
				<div class="con">
					<div class="tit">名 称：</div>
					<div class="cell">{{ info.Title }}</div>
				</div>
				<!-- <div class="con">
					<div class="tit">课程名称：</div>
					<div class="cell">{{ info.Name }}</div>
				</div> -->
				<div class="con">
					<div class="tit">状态：</div>
					<div class="cell">{{ info.StateName }}</div>
				</div>
				<div class="con">
					<div class="tit">奖项名称：</div>
					<div class="cell">{{ info.ActivityTypePrizeName }}</div>
				</div>
				<div class="con">
					<div class="tit">分值：</div>
					<div class="cell">{{ info.Score }}</div>
				</div>
				<div class="con">
					<div class="tit">添加人：</div>
					<div class="cell">{{ info.AddUserNo}}/{{ info.AddUserName}}</div>
				</div>
				<div class="con">
					<div class="tit">添加时间：</div>
					<div class="cell">{{ info.AddTime}}</div>
				</div>
			</div>
			<div class="h3">附件信息</div>
			<div class="message">
				<a-list class="fileListArea" size="small" bordered :dataSource="oldList">
					<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
						<div style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
							<div style="width: 96%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ item.Type == 2 ? '[完结]' : '[其他]' }}{{ item.FileName }}</div>
						</div>
						<!-- <a-icon type="delete" @click="deleteFile(item,1)" style="height: 12px;vertical-align: top;margin-top: 4px;margin-right:12px;cursor: pointer;" ></a-icon> -->
						<a-icon type="download" @click="downloadFile(item, 1)" style="height: 12px;vertical-align: top;margin-top: 4px;margin-right:12px;cursor: pointer;"></a-icon>
					</a-list-item>
				</a-list>
			</div>
			<!-- <div class="h3">审批信息</div>
			<a-steps class="apply-con" progress-dot v-if="flowData.length > 0" :current="999" direction="vertical">
				<a-step v-for="(item, index) in flowData" :key="index">
					<template slot="title">
						{{ item.FlowTypeName + (item.ExamUserName ? ' | ' + item.ExamUserName + ' | ' : '') + (item.IsAdopt == null ? ' | 未审核' : item.IsAdopt ? '通过' : '驳回') }}
					</template>
					<div slot="title" class="flowuser flex" v-if="item.ExamUserData&&item.ExamUserData.length>0">
						可审批人：
						<div class="flowusercon flex-1">
							<div class="flowuserlist" v-for="(flowitem, flowindex) in item.ExamUserData" :key="flowindex">{{ flowitem.Name }} - {{ flowitem.UserNo }} - {{ flowitem.DepartName }}</div>
						</div>
					</div>
					<div slot="subTitle">{{ item.ExamComment }}</div>
					<div slot="description">{{ item.ExamTime }}</div>
				</a-step>
			</a-steps>
			<div v-if="flowData.length == 0" class="nothing">暂无审批信息</div> -->
		</div>
		<!-- <apply :text="text" v-show="applyIf" @closeFun="closeFun"></apply> -->
		<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"><img alt="example" style="width: 100%" :src="previewImage" /></a-modal>
	</div>
</template>

<script>
import Cache from '@/utils/cache';
import moment from 'moment';
import Func from '@/utils/func';
import { ManageCreditApplyDoGetDetail, GetActivityTypeList, GetActivityFileList,ManageCreditFlowDoGetDetail } from '@/api/follow';
// import apply from './apply';
const data = [];
export default {
	components: {
		// apply
	},
	data() {
		return {
			layoutContentHeight: window.innerHeight - 268 + 'px',
			icofileList: [],
			fileList: {},
			previewVisible: false,
			previewImage: '',
			fileList1: [],
			previewVisible1: false,
			previewImage1: '',
			data,
			flowData: [],
			applyIf: false,
			ActivityTypeList: [],
			formLayout: 'horizontal',
			form: this.$form.createForm(this, {
				name: 'coordinated'
			}),
			formValue: {},
			dataValue: {},
			info: {},
			rules: {
				// validator: (rule, val, callback) => {
				// 			// var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
				// 			let pattern = /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;
				// 			if (!pattern.test(val)) {
				// 				callback('请输入正确手机号');
				// 			} else {
				// 				callback();
				// 			}
				// 			callback();
				// 		}
			},
			text: {},
			oldList: [],
			requestUrl: this.global.requestUrl,
			token: Cache.get('token'),
			IsHour: true
		};
	},
	computed: {},
	created() {
		// this.getOtherList();
		this.getList();
	},
	mounted() {},
	methods: {
		moment,
		applyHander() {
			// let item={id:this.$route.query.ID}
			this.text = { ID: this.$route.query.ID };
			this.applyIf = true;
		},
		async downloadFile(item) {
			console.log(item);
			let hrefUrl = this.requestUrl +item.FilePath
			// let hrefUrl = this.requestUrl + '/Manage/ActivityFile/DownFile?userToken=' + encodeURIComponent(this.token) + '&id=' + item.ID;
			window.open(hrefUrl, '_blank');
		},
		async getOtherList() {
			let res = await GetActivityTypeList();
			this.ActivityTypeList = res.data.data;
			let data = {};
			data.activityID = this.$route.query.ID;
			let res1 = await GetActivityFileList(data);
			this.oldList = res1.data.data;
		},
		async getList() {
			let that = this;
			let data = {};
			data.id = this.$route.query.ID;
			let res={}
			if(this.$route.query.source=='积分申请管理列表'){
				res = await ManageCreditApplyDoGetDetail(data)
			}
			if(this.$route.query.source=='积分申请审批列表'){
				res = await ManageCreditFlowDoGetDetail(data)
				
			}
			this.info = res.data.data;
			this.oldList=res.data.fileData;
			// this.data = res.data.formData;
			// this.flowData = res.data.flowData;
			
		},
		closeFunction(data) {
			this.$emit('closeFun', data);
		},
		closeFun() {
			this.applyIf = false;
		},
		handleCancel() {
			this.previewVisible = false;
			this.previewImage = '';
		},
		async handlePreview(file) {
			// let nameType = file.name.substr(file.name.lastIndexOf('.') + 1)
			// if(this.global.imgTypeList.findIndex(m=>{return m==nameType})<0){
			// 	this.$message.error('该文件格式不支持预览')
			// 	return false
			// }else{
			// 	this.previewImage = file.url;
			// 	this.previewVisible = true;
			// }
			this.previewImage = file.url;
			window.open(this.previewImage, '_blank');
		},
		icohandleChange({ fileList }, name) {
			this.icofileList = fileList;
			if (fileList.length == 0) {
				this[name] = {};
			} else {
				if (fileList[0].status == 'done') {
					this[name] = this.requestUrl + fileList[0].response.url;
					let url = this.requestUrl + fileList[0].response.url;
					this.formValue = Object.assign(this.formValue, { [name]: url });
				}
			}
		},
		handleChange({ fileList }, name) {
			this.fileList[name] = fileList;
			if (fileList.length == 0) {
				this[name] = {};
			} else {
				if (fileList[0].status == 'done') {
					this[name] = this.requestUrl + fileList[0].response.url;
					let url = this.requestUrl + fileList[0].response.url;
					this.formValue = Object.assign(this.formValue, { [name]: url });
				}
			}
		},
		dataChange(e, name, type) {
			if (type == 'data') {
				let time = moment(e).format('YYYY-MM-DD HH:mm:ss');
				this.dataValue = Object.assign(this.dataValue, { [name]: time });
			} else {
				let time = moment(e).format('HH:mm:ss');
				this.dataValue = Object.assign(this.dataValue, { [name]: time });
			}
		},
		handleSubmit(e) {
			e.preventDefault();
			this.form.validateFields(async (err, values) => {
				if (!err) {
					let data = values;
					data = Object.assign(data, this.formValue, this.dataValue);
					if (data.activityDate) {
						data.StartTime = moment(data.activityDate[0]).format('YYYY-MM-DD HH:mm:ss');
						data.EndTime = moment(data.activityDate[1]).format('YYYY-MM-DD HH:mm:ss');
					}
					data.ClubID = '63e6e20243d04c0094fe3cb27b244720';
					let res = await UpdateActivity(data);
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.main {
	height: 90%;
	width: 60%;
	overflow-y: scroll;
	float: left;
}
.main-apply {
	// width: 36%;
	// float: right;
	.apply-con {
		margin-top: 20px;
		/deep/.ant-steps-item-content {
			width: 90%;
		}
		/deep/.ant-steps-item-subtitle {
			display: block;
			margin-left: 0px;
		}
	}
	.nothing {
		text-align: center;
		margin: 50px auto;
	}
	.message {
		padding: 10px;
		.con {
			width: 100%;
			line-height: 40px;
			height: 40px;
			border-bottom: 1px dashed #eee;
			padding: 0 10px;
			overflow: hidden;
			.tit {
				float: left;
				width: 90px;
			}
			.cell {
				float: left;
			}
		}
	}
}
.h3 {
	font-size: 14px;
	background: #f6f8f8;
	color: #1890ff;
	padding: 4px 10px;
}
/deep/.ant-form-item {
	margin: 4px 10px;
	display: flex;
}
/deep/.ant-form-item-label {
	width: 180px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: right;
}
/deep/.ant-form-item-control-wrapper {
	flex: 1;
}
/deep/.ant-calendar-picker,
/deep/.ant-time-picker {
	width: 100%;
}
.fixed-top {
	width: inherit;
	position: absolute;
	line-height: 30px;
	top: 0px;
	background-color: white;
	z-index: 999;
	padding: 10px 0 0 10px;
}
.fixed-bottom {
	width: 164px;
	left: 50%;
	bottom: 0px;
	margin: 0px 0px 0px -82px !important;
	background-color: white;
	z-index: 999;
}
/deep/.ant-form {
	margin-top: 10px;
	padding-bottom: 10px;
}
.ant-calendar-picker,
.ant-time-picker {
	width: 100%;
}
</style>
